<template>
	<view>
		<view id="body">
			<view id="dinosaur" ref="sdf">

			</view>
			<view id="keys">
				<view class="key" id="up" @tap="sdf"></view>
				<view class="key" id="down" @tap="sdf"></view>
				<view class="key" id="left" @tap="sdf"></view>
				<view class="key" id="right" @tap="sdf"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				checked: false,
				homePagePath: '/pages/index/index',
				launchOptionsPath: '',

			}
		},
		onLoad() {
			plus.screen.lockOrientation('landscape-primary'); //锁定横屏
			plus.navigator.setFullscreen(true); //隐藏状态栏(应用全屏:只能隐藏状态栏，标题栏和虚拟返回键都还可以显示)	
		},
		methods: {
			sdf(sdf) {
				const dinosaur = this.$refs.sdf;
				const elementId = sdf.target.id;
				uni.showToast({
					title: elementId,
					duration: 2000
				});
				dinosaur.style.width ='30vw'
			}
		}
	}
</script>

<style>
	#body {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
	}

	#dinosaur {
		width: 2vw;
		height: 2vw;
		background-color: antiquewhite;
		position: absolute;
		top: 100px;
		left: 100px;
	}

	#keys {
		width: 200px;
		height: 150px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.key {
		display: inline-block;
		width: 60px;
		height: 60px;
		background-color: #000;
		margin: 3px;

	}
</style>